<template>
  <div class="course-list">
    <div class="course-card" v-for="course in courses" :key="course.id">
      <img :src="course.image" alt="课程封面" class="course-image" />
      <div class="course-info">
        <h3 class="course-title">{{ course.title }}</h3>
        <div class="course-tags">
          <span v-for="tag in course.tags" :key="tag" class="course-tag">{{ tag }}</span>
        </div>
        <div class="course-price">
          <span v-if="course.price === 0">免费</span>
          <span v-else>¥{{ course.price }}</span>
        </div>
        <button class="course-button" @click="goToCourse(course.id)">{{ goToCourseText }}</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const goToCourseText = '去体验';

const courses = ref([
  {
    id: 1,
    title: '外刊精读课',
    image: 'https://picsum.photos/seed/course1/200/200',
    tags: ['阅读技巧', '应试必备', '时事新闻'],
    price: 6
  },
  {
    id: 2,
    title: '六级考试大杀器',
    image: 'https://picsum.photos/seed/course2/200/200',
    tags: ['应试技巧', '碎片斩题', '全真模拟'],
    price: 50
  },
  {
    id: 3,
    title: '四级无忧备考营',
    image: 'https://picsum.photos/seed/course3/200/200',
    tags: ['系统规划', '解题策略', '真题训练'],
    price: 50
  },
  {
    id: 4,
    title: '专升本英语·语法题型课',
    image: 'https://picsum.photos/seed/course4/200/200',
    tags: ['上岸必备', '基础提升', '真题强化'],
    price: 0
  }
]);

const goToCourse = (courseId) => {
  console.log(`跳转到课程 ${courseId} 的详情页`);
  // 实际项目中可以使用 Vue Router 进行页面跳转
  // router.push({ name: 'CourseDetail', params: { id: courseId } });
};
</script>

<style scoped>
.course-list {
  padding: 16px;
}

.course-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: flex-start;
  transition: transform 0.3s ease;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.course-image {
  width: 80px;
  height: 80px;
  margin-right: 16px;
  object-fit: cover;
  border-radius: 4px;
}

.course-info {
  flex: 1;
}

.course-title {
  margin-top: 0;
  font-size: 18px;
  color: #333;
  font-weight: 600;
  margin-bottom: 8px;
}

.course-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.course-tag {
  background-color: #f0f0f0;
  color: #666;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  margin-right: 8px;
  margin-bottom: 8px;
}

.course-price {
  font-size: 18px;
  color: #e64c00;
  margin-bottom: 8px;
  font-weight: 600;
}

.course-button {
  background-color: #ff6700;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.course-button:hover {
  background-color: #e64c00;
}
</style>    